import DashboardLayout from '@/components/layout/DashboardLayout'
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"

// 订单状态映射
const statusMap = {
  pending: { label: '待支付', color: 'bg-yellow-100 text-yellow-800' },
  processing: { label: '处理中', color: 'bg-blue-100 text-blue-800' },
  completed: { label: '已完成', color: 'bg-green-100 text-green-800' },
  cancelled: { label: '已取消', color: 'bg-gray-100 text-gray-800' },
}

// 模拟订单数据
const orders = [
  {
    id: 'ORD001',
    plan: '基础套餐',
    price: '19.90',
    date: '2024-03-15',
    status: 'completed',
    payMethod: '支付宝'
  },
  {
    id: 'ORD002',
    plan: '进阶套餐',
    price: '39.90',
    date: '2024-03-10',
    status: 'pending',
    payMethod: '微信支付'
  },
  {
    id: 'ORD003',
    plan: '专业套餐',
    price: '99.90',
    date: '2024-03-05',
    status: 'processing',
    payMethod: '支付宝'
  }
]

export default function Orders() {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold tracking-tight">我的订单</h2>
        </div>
        
        <Card>
          <CardHeader>
            <CardTitle>订单记录</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>订单号</TableHead>
                  <TableHead>套餐</TableHead>
                  <TableHead>金额</TableHead>
                  <TableHead>下单时间</TableHead>
                  <TableHead>支付方式</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {orders.map((order) => (
                  <TableRow key={order.id}>
                    <TableCell className="font-medium">{order.id}</TableCell>
                    <TableCell>{order.plan}</TableCell>
                    <TableCell>¥{order.price}</TableCell>
                    <TableCell>{order.date}</TableCell>
                    <TableCell>{order.payMethod}</TableCell>
                    <TableCell>
                      <Badge 
                        className={`${statusMap[order.status].color} border-0`}
                      >
                        {statusMap[order.status].label}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <Button variant="outline" size="sm">
                        查看详情
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>订单说明</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            <p className="text-gray-600">
              • 订单支付成功后，服务将立即生效
            </p>
            <p className="text-gray-600">
              • 如需开具发票，请联系客服处理
            </p>
            <p className="text-gray-600">
              • 订单相关问题请提交工单咨询
            </p>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
